<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>视觉差小练习</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <section>
    <img src="bg.jpg" id='bg' alt="">
    <img src="moon.png" id='moon' alt="">
    <img src="mountain.png" id='mountain'alt="">
    <img src="road.png" id='road' alt="">
    <h2 id='text'>Moon Light</h2>
  </section>
  <script type="text/javascript">
    let bg = document.getElementById('bg')
    let moon = document.getElementById('moon')
    let mountain= document.getElementById('mountain')
    let road = document.getElementById('road')
    let text = document.getElementById('text')

    window.addEventListener('scroll',()=>{
      var value = window.scrollY

      bg.style.top = value * 0.5 + 'px'
      moon.style.left = -value * 0.5 + 'px'
      mountain.style.top = -value * 0.15 + 'px'
      road.style.top = value * 0.15 + 'px'
      text.style.top = value * 1 + 'px'
    })
    let oldWid = document.documentElement.clientWidth
    window.onresize = ()=>{
      let newWid = document.documentElement.clientWidth
      text.style.fontSize = 10 * newWid / oldWid + 'em'
    }
  </script>
  
</body>
</html>